<template>
	<div v-loading="formLoading" style="border: 1px solid #eee;margin: 20px 20px 0 20px;">
		<h3>{{columnName}}-专栏赠送列表</h3>
		<div style="padding:30px 20px;overflow: hidden;border-bottom: 1px solid #eee;">
			<el-input v-model="listQuery.searchName" placeholder="请根据用户昵称，手机号或ID搜索" @keyup.enter.native="toSearchName" style="width: 250px"></el-input>
			<el-button class="search" type="success" icon="el-icon-search" @click="toSearchName">搜索</el-button>
		</div>
		<div></div>
		<el-table :data="tableData3" style="width: 100%;">
		    <el-table-column fixed  label="赠送的专栏">
		    	<template slot-scope="scope">
		            <p style="float: left;padding-right: 10px;"><img :src="scope.row.cover" style="width: 100px;height: 50px;"/></p>
		            <div style="float: left;">
		            	<p>{{scope.row.name}}</p>
		            	<p style="color: orange;">赠送</p>
		            </div>
		        </template>
		    </el-table-column>
		    <el-table-column align="center" label="赠送学员">
            <template slot-scope="scope">
              <img :src="scope.row.headimgurl" style="width:40px;height:40px;border-radius:100%;vertical-align:middle;">
              <br><font>{{scope.row.nickname}}<br>（ID：{{scope.row.encodeUserId}}）</font>
            </template>
		    </el-table-column>
        <el-table-column width="120" align="center" label="手机号">
            <template slot-scope="scope">
              <font>{{scope.row.mobile}}</font>
            </template>
        </el-table-column>
		    <el-table-column label="操作" align="center" v-if="permission == 3">
		    	<template slot-scope="scope">
			    	<b class="nf" @click="openDelete(scope.row.orderId)">删除</b>
			    </template>
		    </el-table-column>
		</el-table>
		<div class="block text-c">
				<!--分页组件 current-page:当前页   -->
				<!--   page-sizes:每页几条数据（选项）   -->
				<!--   page-size:每页几条数据   -->
				<!--   total:总条数   -->
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="listQuery.currentPage"
			      :page-sizes="[10, 20, 30, 40,50]"
			      :page-size="8"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="listQuery.total">
			    </el-pagination>
			</div>
	</div>
</template>

<script>
import { toGetGiveList, toDelOrder } from '@/api/column'
import { knowledge_columns } from '@/utils/permission'
export default {
  data() {
    return {
      formLoading: false,
      permission: 3,
      listQuery: {
        columnId: null,
        searchName: '', // 搜索框用户的手机号
        currentPage: 1, // 当前页
        total: null, // 数据总条数
        page: 1,
        limit: 10
      },
      columnName: null,
      tableData3: []
    }
  },
  watch: {
    // 监听路由名称变化 重新调用数据
    $route: function(to, from) {
      if (to.name == 'giveList') {
        this.columnName = this.$route.query.name
        this.getModelPermission()
        this.getGiveList()
      }
    }
  },
  created() {
    this.columnName = this.$route.query.name
    this.getModelPermission()
    this.getGiveList()
  },
  methods: {
    getModelPermission() {
      this.permission = knowledge_columns()
    },
    getGiveList() {
      this.formLoading = true
      this.listQuery.columnId = this.$route.params.ColumnId
      toGetGiveList(this.listQuery)
        .then(res => {
          // 正确回调
          this.tableData3 = res.data.data.data
          this.listQuery.total = res.data.data.total
          //this.columnName = res.data.data.data[0]['name']
          this.formLoading = false
        })
        .catch(err => {
          this.formLoading = false
          console.log(err)
        })
    },
    openDelete(orderId) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formLoading = true
        toDelOrder(orderId)
          .then(res => {
          // 正确回调
            this.formLoading = false
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getGiveList()
          })
          .catch(err => {
            this.formLoading = false
            console.log(err)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    linkToGiveList() {
      location.href = '#/column/giveList'
    },
    handleSizeChange(val) { // 切换每页几条数据方法
      this.listQuery.limit = val
      this.getGiveList()
    },
    handleCurrentChange(val) { // 切换当前页
      this.listQuery.page = val
      this.getGiveList()
    },
    toSearchName() {
      this.getGiveList()
    }
  },
  mounted() {
    this.total = this.tableData3.length
  }
}
</script>
<style scoped>
	h3{
		background: #eee;
		border-bottom: 1px solid #eee;
		padding-left: 20px;
		font-weight: 500;
		font-size: 12px;
		line-height: 30px;
		margin: 0;
	}
	table{
		font-size: 12px;
		color: #333;
	}
	tr{
		line-height: 36px;
	}
	td{
		text-align: center;
	}
	td span{
		border-radius: 50%;
		overflow: hidden;
		display: inline;
		margin-right: 10px;
		background: #ccc;
	}
	td span img{
		width: 40px;
		height: 40px;
		vertical-align: middle;
		border-radius:50%;
	}
	b{
		float: left;
		font-weight: 500;
	}
	.nf{
	    float:none;
	}
</style>
